<template lang="pug">
vuedraggable(
  tag="div"
  style="border: 1px dashed #999; position:relative;"
  v-model="data.list"
  v-bind="{group:'people', ghostClass: 'ghost'}")
  component(:is="data.tag")
    template(
      v-for="(item, index) in (data.list || [])"
      :key="index")
      template(v-if="item.layout")
        layoutComp(:data="item")
      template(v-else)
        elementCom(:data="item")
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
import { VueDraggableNext } from "vue-draggable-next";
// import layoutComp from "./layout.vue";
import elementCom from "./element.vue";
export default defineComponent({
  name: "layoutComp",
  components: {
    // layoutComp,
    vuedraggable: VueDraggableNext,
    elementCom,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const store = useStore();
    onMounted(() => {
      console.log("onMounted", props);
    });
    return {};
  },
});
</script>

<style lang="stylus" scoped>
.page-content
  background #fff
</style>
